<template>
<!--    文件上传按钮和显示样式切换按钮-->
    <div style="overflow: hidden;">
        <div class="change">
<!--            // 绑定单击事件进行样式的切换-->
            <div class="list" @click="show">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="pic" @click="hide">
                <div class="supperBox" >
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
<!--        啥也没有-->
    </div>
</template>

<script>
    // import {getaddlist} from "../api/api";

    export default {
        name: 'upload',
        inject:['reload'],
        data() {
            return {

            }
        },
        methods: {
            // 组件间的交互利用vuex实现
            // 修改store中state中的数据
            show(){
                this.$store.commit("changeShow", true)
                let list = document.getElementsByClassName("list")[0]
                let pic = document.getElementsByClassName("pic")[0]
                for(let i = 0;i<list.childNodes.length;i++){
                    list.childNodes[i].style.background ="#FFFFFF"
                }

                for(let i = 0;i<pic.childNodes[0].childNodes.length;i++){
                    pic.childNodes[0].childNodes[i].style.background ="#D8D8D8"
                }
                list.style.background="#1890FF"
                pic.style.background="#FFFFFF"
                // getaddlist(this.current,7,this.$store.state.obj.fileType,this.$store.state.obj.name,this.$store.state.obj.startTime,this.$store.state.obj.endTime).then(res=>{
                //     this.$store.commit("changeInforList",res.page.list)
                //     this.$store.commit("changeTotal",res.page.total)
                // })

            },
            hide(){
                this.$store.commit("changeShow", false)
                let list = document.getElementsByClassName("list")[0]
                let pic = document.getElementsByClassName("pic")[0]
                for(let i = 0;i<list.childNodes.length;i++){
                    list.childNodes[i].style.background ="#D8D8D8"
                }
                for(let i = 0;i<pic.childNodes[0].childNodes.length;i++){
                    pic.childNodes[0].childNodes[i].style.background ="#FFFFFF"
                }
                list.style.background="#FFFFFF"
                pic.style.background="#1890FF"
                // 实现新闻的展示
                // getaddlist(this.current,18,this.$store.state.obj.fileType,this.$store.state.obj.name,this.$store.state.obj.startTime,this.$store.state.obj.endTime).then(res=>{
                //     this.$store.commit("changeInforList",res.page.list)
                //     this.$store.commit("changeTotal",res.page.total)
                // })

            }
        },
        updated() {
            this.$store.commit("changeShow", true)
        },
        components: {

        }
    }
</script>
<style scoped lang="less">

    .change {
        width: 108px;
        height: 32px;
        border-radius: 4px;
        border: 1px solid #D8D8D8;
        margin-left: 24px;
        float: left;
        /*通过flex布局实现左右固定*/
        display: flex;
        justify-content: space-between;
        /*添加小手的*/
        cursor: pointer;
        .list {
            width: 53px;
            height: 30px;
            background: #1890FF;
            margin-left: -0.05px;
            /*用于切换的尝试*/
            /*background: #FFFFFF;*/
            border-radius: 4px 0px 0px 4px;
            div{
                width: 17px;
                height: 2px;
                background: #FFFFFF;
                margin: auto;
            }
            div:nth-child(1){
                margin-top: 7px;
            }
            div:nth-child(2){
                margin: 5px auto;
            }
        }
        .pic {
            width: 53px;
            height: 30px;
            background: #FFFFFF;
            /*background: #1890FF;*/
            border-radius: 0px 4px 4px 0px;
            .supperBox{
                width: 16px;
                height: 16px;
                margin: 9px auto 0;
                display: flex;
                flex-wrap: wrap;
                div{
                    width: 7px;
                    height: 7px;
                    background: #D8D8D8;
                }
                div:nth-child(1){
                    margin-right: 2px;
                }
                div:nth-child(3){
                    margin-right: 2px;
                }
            }
        }
    }
</style>
